<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>winweb</title>
    <script type="text/javascript">
        window.onload = function () {
            var box1 = document.getElementById("box1");
            var winStart = document.getElementById("winStart");
            var menu = document.getElementById("menu");
            var addedappid = document.getElementById("addedappid");
            var powerSupplyid = document.getElementById("powerSupplyid");
            var fixedAppid = document.getElementById("fixedAppid");
            var div1 = document.getElementById("div1");
            var barOff = document.getElementById("barOff");
            var barAppid = document.getElementById("barAppid");
            var winNoticeid = document.getElementById("winNoticeid");
            var noticeBarid = document.getElementById("noticeBarid");
            var winViewid = document.getElementById("winViewid");
            var contentTopoff = document.getElementById("contentTopoff");
            var contentFr = document.getElementById("contentFr");



            winStart.onclick =function () {         //开始键点击事件
                if (menu.style.height === "600px"){
                    div1off();  //调用开始菜单关闭函数,设置height为0并设置opacity透明度
                }else {
                    menu.style.height = "600px";
                    addedappid.style.height = "592px";
                    powerSupplyid.style.height = "150px";
                    fixedAppid.style.height = "600px";
                    addedappid.style.opacity="0.9";
                    powerSupplyid.style.opacity="0.9";
                    fixedAppid.style.opacity="0.9";
                    menu.style.opacity="0.9";
                }
            }

            barOff.onclick = function () {
                if (barAppid.style.height === "115px"){
                    barAppid.style.height = "256px";
                    barOff.innerHTML = "折叠";
                }else {
                    barAppid.style.height = "115px";
                    barOff.innerHTML = "展开";
                }

            }
            winNoticeid.onclick = function () {
                if (noticeBarid.style.width === "400px"){
                    noticeBarid.style.width = "0px"
                }else {
                    noticeBarid.style.width = "400px"
                }
            }
            winViewid.onclick = function () {
                if (content.style.display === "block" || content.style.display === ""){
                    content.style.display = "none";
                }else {
                    content.style.display = "block";
                }

            }
            contentTopoff.onmousedown = function () {
                content.style.display = "none";
                content.style.width = "";
                content.style.height = "";
                content.style.top = "";
                content.style.left = "";
                content.style.bottom = "";
            }


            //桌面图标移动
            //绑定鼠标按下事件
            box1.onmousedown = function (event) {
                //复制节点,并通过父元素创建
                var box2 = box1.cloneNode(true);
                box2.setAttribute("id", "box2");
                box1.parentNode.appendChild(box2);
                //div的偏移量
                var ol = event.clientX - box1.offsetLeft;
                var ot = event.clientY - box1.offsetTop;

                //鼠标移动事件1
                document.onmousemove = function (event) {
                    //兼容性
                    event = event || window.event;
                    box1.style.opacity = 0.5;
                    // box2.style.backgroundColor = "rgba(29,126,197,0.5)";

                    //获取鼠标坐标
                    var left = event.clientX - ol;
                    var top = event.clientY - ot;

                    //修改box1的位置
                    box1.style.left = left + "px";
                    box1.style.top = top + "px";
                }
                //松开鼠标时
                document.onmouseup = function (event) {
                    box1.style.opacity = 1;
                    //找到父元素删除自己
                    var boxNode2 = document.getElementById("box2");
                    var parentNode = boxNode2.parentNode;
                    parentNode.removeChild(boxNode2);
                    document.onmousemove = null;
                    document.onmouseup = null;
                }
                //取消浏览器默认的拖拽
                return false;
            }






            //content拖动

            var content = document.getElementById("content");
            var contentTop = document.getElementById("contentTop");
            //绑定鼠标按下事件
            contentTop.onmousedown = function (event) {
                //div的偏移量
                var oll = event.clientX - content.offsetLeft;
                var otl = event.clientY - content.offsetTop;
                var owl = document.documentElement.clientWidth;   //获取可见宽度
                var ohl = document.documentElement.clientHeight;
                var owll = owl - 10;
                var ohll = ohl -45;

                if(content.offsetTop === 0 && owl > content.offsetWidth ){
                    content.style.height="";
                    content.style.width = "";
                }

                document.onmousemove = function (event) {
                    event = event || window.event;
                    var left = event.clientX - oll;
                    var top = event.clientY - otl;
                    //content

                    if (event.clientX > 0 && owll > event.clientX){
                        content.style.left = left + "px";
                    }else {
                        // content.style.bottom = 15 + "px";
                        // content.style.width = owl/2 + "px";
                        // content.style.height = ohl+ "px";
                        console.log("X轴超出");
                    }
                    if (event.clientY <= ohll && event.clientY >= 0){
                        content.style.top = top + "px";
                    }else {
                        console.log("Y轴超出");
                    }
                }
                //onmouseup
                document.onmouseup = function (event) {
                    if (event.clientX > 0 && owll > event.clientX){
                        if (event.clientY <= 0){
                            content.style.top = 0;
                            content.style.left = 0;
                            content.style.height = ohl - 45 + "px";
                            content.style.width = owl + "px";
                            console.log("触发高度");
                        }
                    }else if (event.clientX  > owll){
                        content.style.top = 0;
                        content.style.left = owl/2 + "px";
                        content.style.width = owl/2 + "px";
                        content.style.height = ohl - 45 + "px";
                        console.log("右")
                    }else {
                        content.style.top = 0;
                        content.style.left = 0;
                        content.style.width = owl/2 + "px";
                        content.style.height = ohl - 45 + "px";
                        console.log("左")
                    }
                    document.onmousemove = null;
                    document.onmouseup = null;
                    div1off();
                }
                return false;
            }




                //contentFr改变窗口宽度
                //绑定鼠标按下事件
            contentFr.onmousedown = function (event) {
                event = event || window.event;
                var cententl = content.offsetLeft;
                div1off();
                //鼠标移动事件
                document.onmousemove = function (event) {
                    //兼容性
                    event = event || window.event;
                    //获取鼠标坐标
                    var contentmx = event.clientX - cententl;
                    if (contentmx > 135){
                        content.style.width = contentmx + "px";
                    }
                }
                //松开鼠标时
                document.onmouseup = function (event) {
                    //取消document.onmousemove事件
                    document.onmousemove = null;
                    //取消document.onmousemup事件
                    document.onmouseup = null;
                }
                //取消浏览器默认的拖拽
                return false;
            }




            //contentTo改变窗口高度
            //绑定鼠标按下事件
            contentTo.onmousedown = function (event) {
                div1off();
                event = event || window.event;
                var lo = event.clientY;
                var loo = content.offsetHeight;
                //浏览器显示高度-元素top-元素height=元素bottom
                var contentb = document.body.clientHeight - content.offsetTop - content.offsetHeight;
                content.style.bottom = contentb + "px";
                content.style.top = "";       //删除移动div时创建的top内联属性,因与bottom定位实现上下拉伸冲突
                //鼠标移动事件
                document.onmousemove = function (event) {
                    //兼容性
                    event = event || window.event;
                    //获取鼠标坐标
                    var cc = event.clientY - lo;
                    if (cc >= 0) {
                        var dd = loo - cc;
                        var aaaa = content.offsetHeight;
                        if (aaaa > 100) {
                            content.style.height = dd + "px";
                        }else{
                            document.onmousemove = null;
                            document.onmouseup = null;
                        }
                    } else {
                            var ddd = cc * -1 + loo;
                            content.style.height = ddd + "px";
                        }
                }
                //onmouseup
                document.onmouseup = function (event) {
                    document.onmousemove = null;
                    document.onmouseup = null;
                }
                return false;
            }


            var div1off = function (event) {
                event = event || window.event;
                addedappid.style.opacity="0.1";
                powerSupplyid.style.opacity="0.1";
                fixedAppid.style.opacity="0.1";
                menu.style.opacity="0.5";
                menu.style.height = "0";
                addedappid.style.height = "0";
                powerSupplyid.style.height = "0";
                fixedAppid.style.height = "0";
                console.log("div1单击")
                noticeBarid.style.width = "0px"
            }
            div1.onclick = function () {
                div1off();
            }
        }



    </script>
    <style type="text/css">
        *{margin: 0;padding: 0}
        p,h1,h2,h3,h4,h5,h6,dl,dt,dd,ol,ul,li{margin: 0;padding: 0;}
        li{list-style: none;}
        a{text-decoration: none;color: #000;}
        img{display: block}
        input{border: none}
        .mian{
            width: 1200px;
            margin: 0 auto;
        }
        /*浮动*/
        .fl{float: left;}
        .fr{float: right;}
        /*清除浮动*/
        .clearFixed:after{
            content: "";
            display: block;
            clear:both;
        }
        html,body{
            width: 100%;
            height: 100%;
            overflow: hidden;
        }

        #box1{
            width:78px;
            height: 78px;
            /*background-color: salmon;*/
            /*绝对定位*/
            position: absolute;
            left: 10px;
            top: 10px;
            border: solid 1px transparent;

        }
        #box2{
            width: 78px;
            height: 78px;
            position: absolute;
            left: 10px;
            top: 10px;
            border: solid 1px #569ED6;
            background-color:rgba(29,126,197,0.2);
        }
        #box2 span {
            background:url("img/system.jpg");
            width: 40px;
            height: 40px;
            background-size:100% 100%;
            margin-top: 5px;
            margin-left: 20px;
            position: absolute;
            line-height: 110px;
            font-size: 10px;
            text-align: center;
            color: #FFFFFF;
        }
        #box1 span {
            background:url("img/system.jpg");
            width: 40px;
            height: 40px;
            background-size:100% 100%;
            margin-top: 5px;
            margin-left: 20px;
            position: absolute;
            line-height: 110px;
            font-size: 10px;
            text-align: center;
            color: #FFFFFF;
        }
        #box1:hover{
            background-color:rgba(29,126,197,0.2);
            border: solid 1px #569ED6;

        }
        #box1:active{
            background-color: transparent;
            /*border: none;*/
            border: solid 1px transparent;
        }



        #div0{
            width: 100%;
            height: 100%;
            background-image: url("img/img1.jpg");
            -moz-background-size:100% 100%;
            position: relative;
            background-position: center center;
            background-repeat: no-repeat;
            background-size: cover;
            overflow:hidden;

        }
        ul,ol {list-style: none}
        ul{
            height: 200px;
            display: flex;
        }
        li{
            width: 20px;
            height: 20px;
            border-radius: 10px;
            background: #E81123;
            margin-right: 20px;
        }
        li:nth-child(1){
            background: #E81123;
            animation: love1 4s 0s infinite;
        }
        li:nth-child(2){
            background: darkturquoise;
            animation: love2 4s 0.2s infinite;
        }
        li:nth-child(3){
            background: darksalmon;
            animation: love3 4s 0.4s infinite;
        }
        li:nth-child(4){
            background: deeppink;
            animation: love4 4s 0.6s infinite;
        }
        li:nth-child(5){
            background: yellow;
            animation: love5 4s 0.8s infinite;
        }
        li:nth-child(6){
            background: deeppink;
            animation: love4 4s 1s infinite;
        }
        li:nth-child(7){
            background: darksalmon;
            animation: love3 4s 1.2s infinite;
        }
        li:nth-child(8){
            background: darkturquoise;
            animation: love2 4s 1.4s infinite;
        }
        li:nth-child(9){
            background: #E81123;
            animation: love1 4s 1.6s infinite;
            margin-right: 0;
        }
        @keyframes love1 {
            30%, 50%{
                height: 60px;
                transform: translateY(-30px);
            }
            70%, 100%{
                height: 20px;
                transform: translateY(0px);
            }
        }
        @keyframes love2 {
            30%, 50%{
                height: 125px;
                transform: translateY(-60px);
            }
            70%, 100%{
                height: 20px;
                transform: translateY(0px);
            }
        }
        @keyframes love3 {
            30%, 50%{
                height: 160px;
                transform: translateY(-75px);
            }
            70%, 100%{
                height: 20px;
                transform: translateY(0px);
            }
        }
        @keyframes love4 {
            30%, 50%{
                height: 180px;
                transform: translateY(-60px);
            }
            70%, 100%{
                height: 20px;
                transform: translateY(0px);
            }
        }
        @keyframes love5 {
            30%, 50%{
                height: 200px;
                transform: translateY(-45px);
            }
            70%, 100%{
                height: 20px;
                transform: translateY(0px);
            }
        }
        #content {
            width: 700px;
            height: 500px;
            /*border: 1px solid black;*/
            /*background-color: goldenrod;*/
            background-size:100% 100%;
            position: absolute;
            left: 600px;
            bottom: 273px;
            /*margin-top: 120px;*/
            /*毛玻璃效果*/
            background-color: rgba(255, 255, 255, 0.1);
            -webkit-backdrop-filter: blur(10px);
            backdrop-filter: blur(20px);
            box-shadow:3px 0 8px -4px #000000;
        }
        #hd{
            height: 95%;
            width: 100%;
            bottom: 0;
            position: absolute;
            /*background: black;*/
            display: flex;
            justify-content: center;
            align-items: center;
            align-content: center;
        }
        #content #contentTop{
            height: 32px;
            width: auto;
            background-color: #41A7CF;

        }
        #content #contentTop span{
            height: 32px;
            width: 44px;
            /*background-color: aliceblue;*/
            /*border: 1px solid red;*/
            font-size: 25px;
            transition: background 0.2s, color 0.2s;
            -webkit-transition: background 0.2s, color 0.2s;
            cursor: default;
        }
        #content #contentTop span:hover{
            background-color: #3A96BA;
        }
        #content #contentTop .kou{
            margin-left: 15px;
            line-height: 25px;
        }
        #content #contentTop .hen{
            margin-left: 16px;
            line-height: 38px;
        }
        #content #contentTop #contentTopoff{
            transition: background 0.2s, color 0.2s;
            -webkit-transition: background 0.2s, color 0.2s;
        }
        #content #contentTop #contentTopoff p{
            margin-left: 14px;
            line-height: 30px;
        }
        #content #contentTop #contentTopoff:hover{
            background-color: #E81123;
            color: #FFFFFF;
        }

        #div1{
            width: 100%;
            height: 100%;
            /*background-image: url("img/win10.jpg");*/
            /*background-size:100% 100%;*/
            /*-moz-background-size:100% 100%;*/
            position: relative;
        }
        .winNav{
            width: 100%;
            height: 45px;
            /*background-color: #277A9B;*/
            position: absolute;
            bottom:0;

            background-color: rgba(255, 255, 255, 0.1);
            -webkit-backdrop-filter: blur(10px);
            backdrop-filter: blur(10px);

        }

        .winNav div{
            width: 50px;
            height: 100%;
            transition: background 0.5s, color 0.5s;
            -webkit-transition: background 0.5s, color 0.5s;
            /*background-color: red;*/
        }

        .winNav div:hover{
            background: #479BBB;
            color: #FFFFFF;
        }

        .noticeBar{
            position: absolute;
            bottom: 45px;
            right: 0;
            height: 100%;
            width: 1px;
            /*毛玻璃效果*/
            background-color: rgba(17, 148, 193, 0.2);
            -webkit-backdrop-filter: blur(10px);
            backdrop-filter: blur(20px);
            box-shadow:3px 0 8px -4px #000000;
            /*动态显示*/

            transition:width 2s;
            -moz-transition:width 2s;
            -webkit-transition:width 0.2s;
            -o-transition: width 2s;


        }
        .noticeBar .barApp{
            width: 100%;
            height: 256px;
            overflow-x: hidden;
            overflow-y: hidden;
            /*height: 115px;*/
            transition:height 2s;
            -moz-transition:height 2s;
            -webkit-transition:height 0.4s;
            -o-transition: height 2s;

            bottom: 0;
            position: absolute;
            /*border: 1px solid #FFFFFF;*/
            margin-left: 10px;
            cursor: default;/*鼠标指针*/
        }

        #barOff{
            width: 40px;
            color: aliceblue;
            font-size: 10px;
            line-height: 40px;
            transition: background 1s, color 1s, border 1s;
            -webkit-transition: background 1s, color 1s, border 0.5s;
        }
        #barOff:hover{
            color:black;

        }
        .noticeBar .barApp div{
            height: 65px;
            width: 90px;
            border: 1px solid transparent;
            margin-top: 4px;
            margin-right: 4px;

            background-repeat: no-repeat;/*关闭图片重复*/
            background-position: 2px 4px;/*图片定位*/
            background-size: 25px 20px;
            line-height: 105px;
            font-size: 10px;
            color: aliceblue;


            background-color: rgba(17, 148, 193, 0.3);
            -webkit-backdrop-filter: blur(10px);
            backdrop-filter: blur(20px);
            box-shadow:3px 0 8px -4px #000000;

            transition: background 1s, color 1s, border 1s;
            -webkit-transition: background 1s, color 1s, border 0.5s;
        }
        .noticeBar .barApp div:hover{
            border: 1px solid #FFFFFF;
            background-color: rgba(17, 148, 193, 0.8);
            -webkit-backdrop-filter: blur(10px);
            backdrop-filter: blur(20px);
            box-shadow:3px 0 8px -4px #000000;
            color: #FFFFFF;
        }

        .noticeBar .barApp .ipad{
            background-image: url("img/ipad3png.png");
        }

        .winNav .winStart span{
            background: url("img/winStart.png");
            background-size:100% 100%;
            margin-top: 15px;
            margin-left: 16px;
            width: 17px;
            height: 18px;
        }
        .winNav span:hover{
            background-image: url("img/winStart2.png");
        }
        .winNav .winNotice span{
            background: url("img/you.png");
            background-size:100% 100%;
            margin-top: 15px;
            margin-left: 16px;
            width: 17px;
            height: 18px;
        }
        .winNav .winSearch span{
            background: url("img/search3.png");
            background-size:100% 100%;
            margin-top: 15px;
            margin-left: 16px;
            width: 17px;
            height: 18px;
        }
        .winNav .winView span{
            background: url("img/data2.png");
            background-size:100% 100%;
            margin-top: 12px;
            margin-left: 14px;
            width: 26px;
            height: 22px;
        }



    /*    开始-菜单栏*/
        #menu{
            width: 650px;
            /*height: 600px;*/
            height: 0;
            position: absolute;
            /*bottom: -600px;*/
            bottom:45px;
            /*opacity: 0.9;*/
            background-color: #252627;

            /*毛玻璃测试*/

            background-color: rgba(17, 148, 193, 0.85);
            -webkit-backdrop-filter: blur(10px);
            backdrop-filter: blur(20px);
            box-shadow:3px 0 8px -4px #000000;

        /*    动态显示*/
            transition:height 2s;
            -moz-transition:height 2s;
            -webkit-transition:height 0.4s;
            -o-transition: height 2s;
        }
        /*开始菜单模糊与动态效果完成 2020年5月11日08:34:25*/



        #menu .powerSupply{
            position: absolute;
            /*background-color: skyblue;*/
            width: 50px;
            /*height: 150px;*/
            height: 0;
            bottom: 0;
            /*left: 0;*/
            transition:height 2s;
            -moz-transition:height 2s;
            -webkit-transition:height 0.5s;
            -o-transition: height 2s;

        }
        .powerSupply div{
            height: 50px;
            /*background-color: skyblue;*/
            transition: background 0.5s, color 0.5s;
            -webkit-transition: background 0.5s, color 0.5s;
        }
        .powerSupplySpan {
            background: url("img/you.png");
            background-size: 100% 100%;
            margin-top: 15px;
            margin-left: 16px;
            width: 17px;
            height: 18px;
        }

        .powerSupply div:hover{
            background: #6BAAC2;
            color: #FFFFFF;
        }
        #menu .addedApp {
            width: 250px;
            /*height: 592px;*/
            height: 0;
            position: absolute;
            left: 62px;
            /*background-color: skyblue;*/
            margin-top: 8px;
            bottom: 0;


            transition:height 2s;
            -moz-transition:height 2s;
            -webkit-transition:height 490ms;
            -o-transition: height 2s;


            /*滚动条*/
            overflow: auto;
            border: none;
        }
        .addedApp::-webkit-scrollbar {/*滚动条整体样式*/
            width: 4px;     /*高宽分别对应横竖滚动条的尺寸*/
            height: 1px;
        }
        .addedApp::-webkit-scrollbar-thumb {/*滚动条里面小方块*/
            border-radius: 10px;
            -webkit-box-shadow: inset 0 0 5px rgba(0,0,0,0.2);
            background: #BCD0C3;
        }
        .addedApp::-webkit-scrollbar-track {/*滚动条里面轨道*/
            -webkit-box-shadow: inset 0 0 5px rgba(0,0,0,0.0);
            border-radius: 10px;
            background: transparent;
        }
        .sc {
            height: 1500px;
        }

        #menu .addedApp .al{
            width: 242px;
            height: 35px;
            /*background-color: pink;*/
            /*transition: background 0.1s;*/
            -webkit-transition: background 0.1s;
        }
        #menu .addedApp div:hover{
            background: #5EADCC;
            color: #FFFFFF;
        }
        .addedAppSpan{
            background: url("img/system.jpg");
            background-size:100% 100%;
            margin-top: 2px;
            margin-left: 3px;
            width: 31px;
            height: 31px;
        }
        h5{
            font-size: 10px;
            line-height: 35px;
            margin-left: 41px;
            color: #FFFFFF;
        }
        #menu .addedApp0 h5{
            margin-left: 5px
        }
        #menu .fixedApp {
            width: 321px;
            /*height: 600px;*/
            height: 0;
            position: absolute;
            /*background-color: skyblue;*/
            right: 10px;
            bottom: 0;
            opacity:0.1;
            transition:height 2s;
            -moz-transition:height 2s;
            -webkit-transition:height 450ms;
            -o-transition: height 2s;



        }
        #menu .fixedApp .fixedApp0{
            height: 45px;
            width: 100%;
            color: transparent;
            background-color: transparent;
            transition: background 2s, color 0.5s;
            -webkit-transition: background 0.5s, color 0.5s;
        }
        #menu .fixedApp .fixedApp0 .fixedAppspan{
            line-height: 45px;
        }
        #menu .fixedApp .fixedApp0:hover{
            color: #FFFFFF;
        }


        #menu .fixedApp div{
            height: 100px;
            width: 100px;
            /*background-color: pink;*/
            margin-right: 3px;
            margin-bottom: 3px;
            border: 2px solid transparent;
        }

        #menu .fixedApp .ff1{
            background-image: url("img/office.png");
            /*transition: background 0.5s, color 0.5s;*/
            -webkit-transition: background 0.5s, color 0.5s;
            transition: border 0.5s;
        }
        #menu .fixedApp .ff1:hover{
            border: 2px solid floralwhite;
        }















    </style>
</head>
<body>
    <div id="div0">
        <div id="div1"></div>
        <div id="box1"><span style="cursor: default ">设置</span></div>
<!--        文件夹-->
        <div id="content">
            <div class="fr" id="hd">
                <ul>
                    <li></li>
                    <li></li>
                    <li></li>
                    <li></li>
                    <li></li>
                    <li></li>
                    <li></li>
                    <li></li>
                    <li></li>
                </ul>
            </div>
            <div id="contentFr"
                 style="right:0;position:absolute; height: 100%;width:6px; cursor:e-resize;">
            </div>
            <div id="contentTo"
                 style="top:0;position:absolute; height: 6px;width:100%; cursor:n-resize;">
            </div>
            <div id="contentTop" >
                <span id="contentTopoff" class="fr"><p>×</p></span>
                <span class="fr"><p class="kou">□</p></span>
                <span class="fr"><p class="hen">―</p></span>
            </div>
        </div>

        <div id="menu" class="clearFixed"><!--开始菜单栏-->
<!--            开始栏电源列表-->
            <div id="powerSupplyid" class="powerSupply clearFixed">
                <div class="powerSupply1"><span class="fl powerSupplySpan"></span></div>
                <div class="powerSupply2"><span class="fl powerSupplySpan"></span></div>
                <div class="powerSupply3"><span class="fl powerSupplySpan"></span></div>
            </div>
<!--            开始栏添加APP-->
            <div id="addedappid" class="addedApp clearFixed">
                <div class="sc fr"></div>
                <div class="addedApp0 al"><h5 style="cursor: default ">最近添加</h5></div>
                <div class="addedApp1 al"><span class="fl addedAppSpan"></span><h5>设置</h5></div>
                <div class="addedApp2 al"><span class="fl addedAppSpan"></span><h5>设置</h5></div>
                <div class="addedApp3 al"><span class="fl addedAppSpan"></span><h5>设置</h5></div>
                <div class="addedApp4 al"><span class="fl addedAppSpan"></span><h5>设置</h5></div>
                <div class=" al"><span class="fl addedAppSpan"></span><h5>设置</h5></div>
                <div class=" al"><span class="fl addedAppSpan"></span><h5>设置</h5></div>
                <div class=" al"><span class="fl addedAppSpan"></span><h5>设置</h5></div>
                <div class=" al"><span class="fl addedAppSpan"></span><h5>设置</h5></div>
                <div class=" al"><span class="fl addedAppSpan"></span><h5>设置</h5></div>
                <div class=" al"><span class="fl addedAppSpan"></span><h5>设置</h5></div>
                <div class=" al"><span class="fl addedAppSpan"></span><h5>设置</h5></div>
                <div class=" al"><span class="fl addedAppSpan"></span><h5>设置</h5></div>
                <div class=" al"><span class="fl addedAppSpan"></span><h5>设置</h5></div>
                <div class=" al"><span class="fl addedAppSpan"></span><h5>设置</h5></div>
                <div class=" al"><span class="fl addedAppSpan"></span><h5>设置</h5></div>
                <div class=" al"><span class="fl addedAppSpan"></span><h5>设置</h5></div>
                <div class=" al"><span class="fl addedAppSpan"></span><h5>设置</h5></div>
                <div class=" al"><span class="fl addedAppSpan"></span><h5>设置</h5></div>
                <div class=" al"><span class="fl addedAppSpan"></span><h5>设置</h5></div>
                <div class=" al"><span class="fl addedAppSpan"></span><h5>设置</h5></div>
                <div class=" al"><span class="fl addedAppSpan"></span><h5>设置</h5></div>
                <div class=" al"><span class="fl addedAppSpan"></span><h5>设置</h5></div>

            </div>
<!--            开始栏固定APP end-2020年5月10日06:11:44-->
            <div id="fixedAppid" class="fixedApp">
                <div class="fixedApp0"><span class="fixedAppspan fl" style="cursor: default ">程序</span></div>
                <div class="fixedApp1 ff1 fl"></div>
                <div class="fixedApp2 ff1 fl"></div>
                <div class="fixedApp2 ff1 fl"></div>
                <div class="fixedApp4 ff1 fl"></div>
            </div>

        </div>
            <!--信息栏-->
        <div id="noticeBarid" class="noticeBar">
            <div id="barAppid" class="barApp fl">
                <p id="barOff">折叠</p>
                <div class="ipad fl">平板模式</div>
                <div class="ipad fl">平板模式</div>
                <div class="ipad fl">平板模式</div>
                <div class="ipad fl">平板模式</div>
                <div class="ipad fl">平板模式</div>
                <div class="ipad fl">平板模式</div>
                <div class="ipad fl">平板模式</div>
                <div class="ipad fl">平板模式</div>
                <div class="ipad fl">平板模式</div>
                <div class="ipad fl">平板模式</div>
                <div class="ipad fl">平板模式</div>
                <div class="ipad fl">平板模式</div>
            </div>
            <!--导航栏-->
        </div>
        <div class="winNav clearFixed">
            <div id="winStart"  class="winStart fl">
                <span class="fl"></span>
            </div>
            <div class="winSearch fl"><span class="fl"></span></div>
            <div id="winViewid" class="winView fl"><span class="fl"></span></div>
            <div id="winNoticeid" class="winNotice fr"><span class="fl"></span></div>
            <div class="winTime fr"></div>
            <div class="winNetwork fr"></div>
        </div>
    </div>

</body>
</html>